<template>
	<view class="container">
		<view class="nav-bg" :style="{height: bgHeight + tui.navBarHeight +'px'}">
			<u-navbar :background="background" title-size="34" title="专辑详情" back-icon-color="#ffffff" title-color="#ffffff" :border-bottom="false" 
			:custom-back="tui.goBack" placeholder>
			<view class="d-flex justify-content-right" slot="right" v-if="!USER || USER.id == user_id">
				<view class="setting-icon" @tap="show = true,name = ''">
					<image src="/static/creation/edit.png"></image>
				</view>
			</view>
			</u-navbar>
			<view class="text-ffffff fz-36 text-center">{{albumName}}</view>
		</view>
		<view class="content">
			<view class="draft-title d-flex justify-content-between align-items-center">
				<view class="text-999BA8 fz-30 family-DIN font-weight-600">共有 {{total || 0}} 作品</view>
				<view class="filter-icon" @click="popShow = true">
					<image src="/static/market/filter-def-big.png" v-if="keyword === ''"></image>
					<image src="/static/market/filter-sel-big.png" v-else></image>
				</view>
			</view>
			<view class="creation-item" v-for="item in list" @click="toWorksDetail(item)">
				<view class="position-relative">
					<view class="creation-cover">
						<image :src="item.file" mode="aspectFill" v-if="item.type == 1"></image>
						<image :src="item.cover" mode="aspectFill" v-else></image>
						<template v-if="isYou(item.sell_time)">
							<view class="sell-over-bg sell-time-bg d-flex justify-content-center align-items-center position-absolute">
								<view class="sell-over">
									<image src="/static/home/sell-over-home.png"></image>
								</view>
								<view class="fz-22 text-ffffff">限时抢购</view>
							</view>
						</template>
						<template v-else>
							<view class="sell-over-bg d-flex justify-content-center align-items-center position-absolute" v-if="item.sell_user_works_count <= 0">
								<view class="sell-over">
									<image src="/static/home/sell-over-home1.png"></image>
								</view>
								<view class="fz-22 text-CCCDD6">已售罄</view>
							</view>
						</template>
					</view>
					<view class="position-absolute creation-quantity">
						<view class="d-flex justify-content-center align-items-center">
							<span class="text-D8D9E1 fz-22">发行:</span>
							<span class="text-00D7FF fz-26 font-DIN line-h-1em">{{tui.filterCount(item.count)}}</span>
							<span class="line"></span>
							<span class="text-D8D9E1 fz-22">流通:</span>
							<span class="text-00D7FF fz-26 font-DIN line-h-1em">{{tui.filterCount(item.sell_user_works_count)}}</span>
						</view>
					</view>
				</view>
				<view class="creation-item-title text-292940 fz-32">{{item.name}}</view>
			</view>
			<u-loadmore :status="status" v-show="moreShow"  margin-top="50"/>
			<view class="no-works" v-show="total === 0 && !moreShow && searchKeyword === ''">
				<image src="/static/market/no-works.png" mode="aspectFill"></image>
				<view style="color: #b5b5b5;">空空如也~</view>
			</view>
		</view>
		<u-popup v-model="popShow" mode="center" border-radius="16" closeable @close="popClose">
			<view class="scr-main">
				<u-search class="mt-4" height="70" :focus="popShow" clearabled placeholder="搜索作品" :show-action="false" v-model="keyword"></u-search>
				<view class="ipt-box">
				</view>
				<view class="ipt-box">
					<u-button type="button" throttle-time="0" class="ipt-btn" @tap="reSet">重置</u-button>
					<u-button type="button" class="ipt-btn search" @tap="popClose(1)">搜索
					</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show" mode="center" border-radius="16" closeable>
			<view class="album-box">
				<view class="title">修改专辑</view>
				<view class="item">
					<label class="text-36363A fz-32">专辑名称</label>
					<u-input v-model.trim="name" :focus="show" :custom-style="customStyle" height="80" border="bottom" class="input-box" clearable label-width="0" placeholder="请输入系列名称"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<u-button class="add-btn" :loading="updateLoaing" hover-class="none" @click="updateAlbum">修改</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background:{ background:'rgba(255,255,255,0)' },
				// bgHeight:292,
				bgHeight:210,
				albumName:'',
				name:'',
				id:'',
				list:[],
				page:1,
				total:'',
				show:false,
				updateLoaing:false,
				customStyle:{ fontSize:'32upx' },
				popShow:false,
				keyword:'',
				searchKeyword:'',
				status:'loading',
				moreShow:false,
				background: {
					background: 'linear-gradient(180deg, rgba(0,0,0,0.7000) 0%, rgba(0,0,0,0) 100%)'
				},
				user_id:''
			}
		},
		onLoad(options) {
			this.albumName = options.name
			this.id = options.id
			this.user_id = options.user_id
			this.getWorks()
		},
		computed:{
			USER(){
				return this.$store.state.auth.USER
			}
		},
		onReachBottom() {
			if(this.list.length < this.total){
				this.page ++
				this.getWorks()
			}
		},
		methods:{
			//关闭搜索图层，判断搜索关键字是否改变，如果改变则清空列表并请求接口
			popClose(val){
				if((this.keyword !== this.searchKeyword )|| val == 1){
					this.popShow = false
					this.page = 1
					this.list = []
					this.total = ''
					this.getWorks()
				}
			},
			isYou(time){
				let timestamp = ''
				let nowTime = parseInt(new Date().getTime() / 1000)
				let endTime = new Date(time).getTime() / 1000
				timestamp = endTime - nowTime
				if (timestamp > 0) {
					return true
				}
				return false
			},
			reSet(){
				this.keyword = ''
			},
			//获取专辑下作品列表
			getWorks(){
				this.moreShow = true
				this.status = 'loading'
				this.$store.dispatch('works/albumWorks',{album_id:this.id,name:this.keyword,page:this.page}).then(res=>{
					this.searchKeyword = this.keyword
					this.total = res.data.total
					this.list = [...this.list,...res.data.data]
					if(this.list.length == this.total && this.list.length > 1){
						this.status = 'nomore'
					}else{
						this.moreShow = false
					}
				}).catch(error=>{
					this.moreShow = false
				})
			},
			//修改专辑名称
			updateAlbum(){
				if(this.name === ''){
					return uni.$u.toast('请输入专辑名称')
				}
				this.updateLoaing = true
				this.$store.dispatch('user/albumUpdate',{album_id:this.id,name:this.name}).then(res=>{
					uni.$u.toast('修改成功')
					this.show = false
					this.updateLoaing = false
					this.albumName = this.name
					this.getAlbumList()
				}).catch(error=>{
					this.updateLoaing = false
				})
			},
			//专辑列表
			getAlbumList(){
				this.$store.dispatch('user/userAlbum').then(res=>{})
			},
			//市场作品详情
			toWorksDetail(item){
				uni.navigateTo({
					url:`/pages/secondary/market/index?work_id=${item.id}`
				})
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		min-height: 100vh;
		background:#FEFFFF;
	}
	.nav-bg{
		width:100%;
		background-image: url(/static/creation/zhuanji-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		padding:40upx;
		box-sizing: border-box;
		.setting-icon {
			height: 40upx;
			padding-right: 30upx;
			image {
				width: 44upx;
				height: 44upx;
				vertical-align: top;
			}
		}
	}
	.content{
		width: 100%;
		padding:30upx;
		min-height: 200upx;
		box-sizing: border-box;
		background: #FEFFFF;
		border-radius: 24upx 24upx 0 0;
		margin-top: -176upx;
		
		.draft-title{
			padding-top: 7upx;
			padding-bottom: 38upx;
			.filter-icon{
				width: 32upx;
				height: 32upx;
				image{
					width: 32upx;
					height: 32upx;
				}
			}
		}
		.creation-item{
			width: 690upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.2), 0px 4upx 12upx -6upx rgba(154,166,219,0.1);
			border-radius: 10upx;
			padding: 0 0 24upx 0;
			overflow: hidden;
			margin-bottom: 28upx;
			.creation-cover{
				width:690upx;
				height:690upx;
				margin-bottom: 20upx;
				image{
					width: 690upx;
					height: 690upx;
				}
				.sell-over-bg{
					top:24upx;
					left:24upx;
					padding: 0 16upx;
					background: rgba(41,41,64,0.45);
					border-radius: 20upx;
					backdrop-filter: blur(20px);
					line-height: 36upx;
					min-width: 140upx;
					height: 48upx;
					border-radius: 25upx;
					line-height: 48upx;
					.sell-over{
						width: 30upx;
						height: 30upx;
						margin-right: 8upx;
						image{
							width: 30upx;
							height: 30upx;
							vertical-align: top;
						}
					}
				}
				.sell-time-bg{
					background: linear-gradient(143deg, #AD21FF 0%, #009AFF 100%);
				}
			}
			.creation-quantity {
				width: 278upx;
				height: 48upx;
				background: rgba(41, 41, 64, 0.4);
				border-radius: 24upx 24upx 0px 0px;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				backdrop-filter: blur(20px);
				padding: 8upx 0;
				box-sizing: border-box;
				.line {
					display: block;
					height: 22upx; 
					width: 2upx;
					background: #999BA8;
					margin: 0 14upx;
				}
			}
			
			
			.creation-item-title{
				line-height: 48upx;
				padding: 0 14upx;
				box-sizing: border-box;
			}
		}
	}
	.scr-main {
		width: 690upx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		transition: 0.3s;
		padding: 40upx 30upx 30upx 30upx;
		overflow: hidden;
		border-radius: 0 0 16upx 16upx;
	
		.title {
			padding: 20upx 0 29upx 0;
		}
	
		.document-item {
			display: inline-block;
			min-width: 200upx;
			height: 64upx;
			line-height: 64upx;
			border-radius: 6upx;
			border: 2upx solid #DEE2E6;
			text-align: center;
			margin-bottom: 28upx;
		}
	
		.ipt-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			margin-bottom: 50upx;
	
			button {
				width: 290upx;
				height: 80upx;
				background: #E9ECEF;
				border-radius: 8upx;
				font-size: 28upx;
				color: #7B809A;
				text-align: center;
				line-height: 80upx;
				border: none !important;
			}
			.search{
				background-color: #292940;
				color: #ffffff;
			}
		}
	}
	.album-box{
		width: 640upx;
		background: #FFFFFF;
		padding: 50upx 45upx 60upx 45upx;
		.title{
			color: #292940;
			font-size: 36upx;
			text-align: center;
			font-weight: 500;
		}
		.item {
			width: 100%;
			height: 182upx;
			box-sizing: border-box;
			padding-top: 50upx;
			border-bottom: 1upx solid #D8DEE4;
			position: relative;
			margin-bottom: 60upx;
			color: #292940;
			font-size: 36upx;
			.input-box {
				width: 100%;
				margin-top: 10upx !important;
				font-size: 40upx !important;
			}
		}
		.add-btn{
			width: 544upx;
			height: 98upx;
			background: #292940 !important;
			border-radius: 49upx;
			color: #FFFFFF;
			font-size: 36upx;
			text-align: center;
		}
	}
	.no-works{
		margin: 50upx auto;
		text-align: center;
		image{
			width: 300upx;
			height: 300upx;
		}
	}
</style>